<template>
	<Layout showBack navColor="#fff" bg-color="#fff">
		<!-- logo -->
		<!-- 登录信息 -->
		<view class="page-container">
			<!-- <view class="login-logo">
				<image src="../../static/logo.png" mode="aspectFit" />
			</view> -->
			<view class="login-welcome">
				欢迎登陆
			</view>
			<view class="login-model">
				<u--form labelPosition="left" :model="ruleForm" :rules="rules" ref="form">
					<u-form-item label="账号" prop="username" borderBottom>
						<u--input v-model="ruleForm.username" placeholder="请输入账号" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom>
						<u--input v-model="ruleForm.password" type="password" placeholder="请输入密码" border="none">
						</u--input>
					</u-form-item>
					<view class="login-code">
						<view style="flex: 1;">
							<u-form-item  borderBottom>
								<u--input v-model="ruleForm.code" placeholder="请输入验证码" border="none">
								</u--input>
							</u-form-item>
						</view>
						<u--image :showLoading="true" :src="verifyCode" width="240rpx" height="80rpx"
							@click="handleRefreshCode"></u--image>
					</view>
					<!-- 记住密码 -->
					<view>
						<view class=" mt-20" style="overflow:hidden">
							<u-checkbox-group v-model="checkbox" placement="row">
								<u-checkbox name="checkPass" label="记住密码"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<!-- 按钮 -->
					<view style="margin-top: 120rpx;">
						<u-button type="primary" text="登录" @click="submit"></u-button>
					</view>
				</u--form>
			</view>
		</view>
	</Layout>
</template>

<script>
	import {
		fetchVerifyCode
	} from '@/api/scan.js'

	export default {
		name: 'login',
		data() {
			return {
				checkbox: [],
				ruleForm: {
					username: null,
					password: null,
					code: null,
					uuid: null
				},
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: ['change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change']
					}]
				},
				verifyCode: null
			}
		},
		created() {
			let user = uni.getStorageSync("user")
			if (user) {
				this.ruleForm.username = user.username
				this.ruleForm.password = user.password
				if (user.username && user.password) {
					this.checkbox = ['checkPass']
				}
			} else {
				this.checkbox = []
			}

			this.handleRefreshCode()
		},
		methods: {
			submit() {
				console.log('login', this.$refs.form)
				// this.$refs.form.validate().then(res => {
				uni.showLoading({
					title: '登陆中...'
				})
				this.$store.dispatch('user/login', this.ruleForm).then(res => {
					console.log('login success!', res)
					if (this.checkbox.length > 0) {
						uni.setStorageSync("user", {
							username: this.ruleForm.username,
							password: this.ruleForm.password,
						})
					} else {
						uni.setStorageSync("user", {
							username: this.ruleForm.username,
							password: "",
						})
					}
					uni.hideLoading()
					this.$wxUtils.toast(res || '登录成功！')


					uni.redirectTo({
						url: '/pages/register/index'
					})
					// }) 
				}).catch(err => {
					uni.hideLoading()
					this.$wxUtils.toast(err || '登录失败！')
					this.handleRefreshCode()
				})

			},
			handleRefreshCode() {
				const that = this

				this.ruleForm.uuid = null
				this.ruleForm.code = null
				fetchVerifyCode().then((res) => {

					const {
						uuid,
						img
					} = res || {}
					that.ruleForm.uuid = uuid
					that.verifyCode = img
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-form-item {
			margin-bottom: 40rpx;
		}
	}

	.page-container {
		width: 100%;
		height: 100%;
		padding: 20% 10% 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10%;

		.login-welcome {
			width: 100%;
			font-size: 48rpx;
			color: #000;

		}

		.login-model {
			width: 100%;
		}

		.login-form {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
		}

		.login-logo {
			width: 100%;
			height: 150rpx;
			// margin-bottom: 100rpx;
		}

		.login-code {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
	}
</style>